import React, { useEffect, useState } from "react";
import "./TodoList.css";
import TodoHeader from "./TodoHeader/TodoHeader";
import TodoMain from "./TodoMain/TodoMain";
import TodoFooter from "./TodoFooter/TodoFooter";
import Swal from "sweetalert2";
//导入 axios 创建的实例
import instance from "../../utils/request";

export default function TodoList() {
  //声明任务列表的状态
  let [todos, setTodos] = useState([]);

  //声明一个函数 用来新增任务
  let addTodo = async (title) => {
    //发送 AJAX 请求
    let result = await instance.post("/todo", {
      title: title,
      done: false,
    });
    //新增任务
    setTodos([...todos, result]);
    //成功的提醒
    Swal.fire({
      title: "恭喜! 添加成功",
      icon: "success",
    });
  };

  //声明一个函数 修改任务的完成状态
  let checkTodo = async (id, done) => {
    //发送 AJAX 请求
    await instance.patch(`/todo/${id}`, { done: done });
    //更新网页的状态
    let newTodos = todos.map((item) => {
      //判断 item 是否为当前要修改的任务
      if (item.id === id) {
        //修改完成状态
        item.done = done;
      }
      return item;
    });
    //更新所有任务状态
    setTodos(newTodos);
  };

  //声明一个函数 删除某个任务
  let removeTodo = async (id) => {
    //显示确认框
    let res = await Swal.fire({
      title: "您确定要删除该条记录么?",
      icon: "info",
      showCancelButton: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    });
    //如果点击的是取消
    if (!res.isConfirmed) return;

    // //发送 AJAX 请求删除指定的任务
    await instance.delete(`/todo/${id}`);
    // //提醒
    Swal.fire({
      title: "恭喜! 删除成功",
      icon: "success",
    });
    //筛选任务, 将 id 等于要删除 id 的任务过滤掉
    let newTodos = todos.filter((item) => item.id !== id);
    //更新状态
    setTodos(newTodos);
  };

  //声明函数实现批量更新任务状态
  let checkAllTodo = async (done) => {
    //向服务端发送 AJAX 请求
    let requests = todos.map((item, index) => {
      return new Promise((resolve, reject) => {
        setTimeout(async () => {
          try {
            await instance.patch(`/todo/${item.id}`, {
              done: done,
            });
            resolve();
          } catch (e) {
            reject();
          }
        }, index * 50);
      });
    });
    try {
      //批量处理 promise 对象
      await Promise.all(requests);

      let newTodos = todos.map((item) => {
        //修改任务的状态值
        item.done = done;
        return item;
      });
      //更新状态
      setTodos(newTodos);
    } catch (e) {
      Swal.fire({
        title: "请求失败, 请稍后再试~~",
        icon: "error",
      });
    }
  };

  //声明函数清除已经完成的任务
  let removeDoneTodos = async () => {
    //获取已经完成的任务
    let completeTodos = todos.filter((item) => item.done);
    //判断已经完成任务的数量
    if (completeTodos.length === 0) {
      Swal.fire({
        title: "您暂时还没有选中完成的任务",
        icon: "info",
      });
      return;
    }
    //发送 AJAX 请求
    let requests = completeTodos.map((item) => {
      return instance.delete(`/todo/${item.id}`);
    });

    try {
      //批量处理 promise
      await Promise.all(requests);
      //过滤掉那些已经完成的任务
      let newTodos = todos.filter((item) => !item.done);
      //更新状态
      setTodos(newTodos);
      //成功提示
      //成功的提醒
      Swal.fire({
        title: "恭喜! 批量删除成功",
        icon: "success",
      });
    } catch (e) {
      Swal.fire({
        title: "请求失败, 请稍后再试~~",
        icon: "error",
      });
    }
  };

  useEffect(() => {
    //测试 addTodo 函数是否可用
    // addTodo('测试');
    //测试修改完成状态的函数
    // checkTodo(1, true);
    //测试任务的删除
    // removeTodo(2);
    //测试批量状态更新
    // checkAllTodo(false);
    //测试批量移除已完成任务
    // removeDoneTodos();
  }, []);

  //组件挂载完毕之后, 发送 AJAX 请求获取任务列表数据
  useEffect(() => {
    async function fetchData() {
      //发送 AJAX 请求
      let result = await instance.get("/todo");
      //更新状态
      setTodos(result);
    }
    //调用函数
    fetchData();
  }, []);

  //声明点击事件的回调函数
  let getOne = async () => {
    let result = await instance.get('/todo/1');
    console.log(result);
  }

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain todos={todos} checkTodo={checkTodo} removeTodo={removeTodo} />
        <TodoFooter
          checkAllTodo={checkAllTodo}
          todos={todos}
          removeDoneTodos={removeDoneTodos}
        />
      </div>
      <hr />
      <button onClick={getOne} className="btn btn-primary">点击获取一个任务</button>
    </div>
  );
}
